
import * as PIXI from 'pixi.js';
import Rect from 'components/rect';
import Text from 'components/text';
import Image from 'components/image';
import UnOpenPrompt from './unOpenPrompt';
import {throttle, findGameApp} from 'common/utils';
import GAME from 'common/const/game';
import woodenBoxOpen from 'common/asset/img/boxes/woodenBoxOpen.png';
import chestOpen from 'common/asset/img/boxes/chestOpen.png';
import itemSelectBgSrc from 'common/asset/img/items/itemSelectBg.png';
import injectStore from 'components/injectStore';
const { Container } = PIXI;

@injectStore
export default class ItemFloor {
  constructor({CONST, store, parent}) {

    this.CONST = CONST;
    this.parent = parent;
    this.store = store;
    this.container = new Container();

    const { bg } = CONST.items;
    const { view } = window.CFG;

    let bgMod = new Image({src: bg.src, width: view.width, left: 0, isAdapt: true});
    bgMod.y = view.height - bgMod.height - bg.bottom;

    bgMod.interactive = true;
    bgMod.on('pointerdown', (e) => {
      e.stopped = true;
    }).on('pointerup', (e) => {
      e.stopped = true;
    });

    this.container.addChild(bgMod);
    this._renderItem();

  }

  _renderItem() {

    // 删除之前的item
    if (this.goodsList) {
      this.goodsList.forEach(item => {
        if (item.bg) this.container.removeChild(item.bg);
        if (item.goods) this.container.removeChild(item.goods);
      });
    }

    if (this.itemSelectBg) {
      this.container.removeChild(this.itemSelectBg);
      this.itemSelectBg = null;
    }


    const style = this.CONST.itemStyle;
    const {width, height, margin, bottom } = style;
    const itemBarWidth = Object.keys(this.CONST.items).length * (width + margin) - margin;

    this.goodsList = Object.keys(this.CONST.items).map((item, index) => {

      const goods = this.store.items[index];

      const itemBoxTop = window.CFG.view.height - bottom - height;
      const itemBoxLeft = (window.CFG.view.width - itemBarWidth) / 2 + index * (width + margin);

      // 背景
      let itemBox = new Rect({
        width,
        height,
        top: itemBoxTop,
        left: itemBoxLeft,
        // fill: goods && goods.isSelected ? 0xff0000 : null,
      });


      // 添加物品

      let Goods = goods ? new Image({
        src: goods.src,
        top: itemBoxTop + (height - goods.height) / 2,
      }) : null;

      if (Goods) {
        const scale = 100 / Goods.height;
        Goods.width = Goods.width * scale;
        Goods.height = 100;

        Goods.x = (width - Goods.width) / 2 + itemBoxLeft;
        Goods.y = itemBoxTop + (height - 100) / 2;
      }

      // 物品选中时
      if (goods && goods.isSelected) {

        const startScale = Goods.scale.x;
        this.become = 'larger';

        this.itemSelectBg = new Image({
          src: itemSelectBgSrc,
          width: 126,
          height: 128,
          top: window.CFG.view.height - 143,
          left: 21 + 147 * index,
          isAdapt: true,
        });
        this.container.addChild(this.itemSelectBg);
        // this.container.addChild(this.itemSelectBg);


        //  物体闪烁
        if (this.selectDoodsTimer) clearInterval(this.selectDoodsTimer);
        this.selectDoodsTimer = setInterval(() => {
          this.itemSelectBg.alpha = this.itemSelectBg.alpha === 0 ? 1 : 0;
          // if (this.become === 'larger') {
          //   this.itemSelectBg.alpha -= 0.05;
          //   this.itemSelectBg2.alpha -= 0.05;
          //   if (this.itemSelectBg.alpha <= 0) this.become = 'smaller';
          // } else {
          //   this.itemSelectBg.alpha += 0.05;
          //   this.itemSelectBg2.alpha += 0.05;
          //   if (this.itemSelectBg.alpha >= 1) this.become = 'larger';
          // }
        }, 200);


        // 盒子可以点击
        itemBox.interactive = true;
        itemBox.on('tap', () => {

          const box = this.store.boxes.filter(n => n.openKey === goods.key)[0];
          // console.log('click amethyst', this.store.boxes);
          // console.log('click amethyst', goods.key);
          //
          // if (goods.key === 'amethyst') {
          //   console.log('click amethyst');
          //   const { left, top } = box;
          //   box.parent.useItem('amethyst');
          //   // 获得新钥匙
          //   box.parent.getItem(box.getItems);
          //   let getGoods = this.store.items.filter(item => JSON.stringify(box.getItems).indexOf(item.key) > -1)[0];
          //
          //   console.log('getGoods', getGoods);
          //   this.parent._renderModal(getGoods, () => {});
          //
          //   // // 箱子打开
          //   // this.parent.background.container.removeChild(this.parent.background.wantOpenBox);
          //   //
          //   // let woodenBoxOpenImg = new Image({left, src: chestOpen, top});
          //   // this.parent.background.container.addChild(woodenBoxOpenImg);
          // }

          if (box) {

            if (this.selectDoodsTimer) {
              clearInterval(this.selectDoodsTimer);
              this.selectDoodsTimer = null;
            }

            switch (box.key) {
              // 章鱼需要摇晃
              case 'octopus': {
                this.parent._renderModal(box, () => {
                  const { left, top } = box;
                  // 使用钥匙
                  box.parent.useItem(box.openKey);
                  // 获得新钥匙
                  box.parent.getItem(box.getItems);

                  this.parent.background.container.removeChild(this.parent.background.wantOpenBox);

                  let octopusOpenImg = new Image({left, src: box.src, top, width: box.width, height: box.height});
                  this.parent.background.container.addChild(octopusOpenImg);
                });
                break;
              }
              case 'ghost': {
                this.parent._renderModal(box, () => {
                  // 使用钥匙
                  box.parent.useItem(box.openKey);
                  // 获得新钥匙
                  box.parent.getItem(box.getItems);

                  // 移除将要打开的盒子
                  this.parent.background.container.removeChild(this.parent.background.wantOpenBox);
                  if (this.parent.background.ghostCover) {
                    this.parent.background.container.removeChild(this.parent.background.ghostCover);
                    this.parent.background.ghostCover = null;

                  }
                });
                break;
              }
              case 'chest': {
                this.parent._renderModal(box, () => {
                  const { left, top } = box;
                  this.parent.background.container.removeChild(this.parent.background.wantOpenBox);

                  let woodenBoxOpenImg = new Image({left, src: chestOpen, top});
                  this.parent.background.container.addChild(woodenBoxOpenImg);
                });

                break;
              }
              // case 'amethyst': {
              //   console.log('click amethyst');
              //   const { left, top } = box;
              //   this.store.useItem('amethyst');
              //   this.parent.background.container.removeChild(this.parent.background.wantOpenBox);
              //
              //   let woodenBoxOpenImg = new Image({left, src: chestOpen, top});
              //   this.parent.background.container.addChild(woodenBoxOpenImg);
              //
              //   this.parent._renderContent({key: 'amethystBox'}, () => {});
              //   break;
              // }
              // 点击门开始抽奖
              case 'door': {
                findGameApp(this).enterScene('award');
                break;
              }
              default: {
                this.useKey(box);
              }
            }
          }
        });
      }




      this.container.addChild(itemBox);

      Goods && this.container.addChild(Goods);

      return {
        bg: itemBox,
        goods: Goods,
      };
    });

  };

  _renderUnOpenPrompt({text}) {
    const CONST = GAME.itemFloor.unOpenPrompt;
    this.unOpenPrompt = new UnOpenPrompt({parent: this, CONST, text});
    this.container.addChild(this.unOpenPrompt.container);
  };

  _renderHasUseKeyCue = () => {
    const { view } = window.CFG;
    // 提示
    let hasUseKeyCue = new Rect({
      width: 452,
      height: 80,
      radius: 40,
      top: (view.height - 80) / 2,
      left: (view.width - 452) / 2,
      fill: 0x010101,
    });
    hasUseKeyCue.alpha = 0.5;

    let hasUseKeyText = new Text({
      value: '有可使用道具！',
      fill: 0xffffff,
      fontSize: 32,
    });
    hasUseKeyText.x = (view.width - 452) / 2 + 114;
    hasUseKeyText.y = (view.height - 80) / 2 + 24;

    this.container.addChild(hasUseKeyCue);
    this.container.addChild(hasUseKeyText);

    setTimeout(() => {
      this.container.removeChild(hasUseKeyCue);
      this.container.removeChild(hasUseKeyText);
    }, 1000);
  };

  useKey = (box) => {
    // 使用钥匙
    box.parent.useItem(box.openKey);
    // 获得新钥匙
    box.parent.getItem(box.getItems);

    this.parent._renderModal(box);

    switch (box.key) {
      case 'woodenBox': {
        const { left, top } = box;
        this.parent.background.container.removeChild(this.parent.background.wantOpenBox);
        let woodenBoxOpenImg = new Image({left, src: woodenBoxOpen, top});
        this.parent.background.container.addChild(woodenBoxOpenImg);
        break;
      }
      default: {
        // 移除将要打开的盒子
        this.parent.background.container.removeChild(this.parent.background.wantOpenBox);
      }
    }
  };
}
